<template>
  <div>
    <el-divider>审核</el-divider>
    <el-form :model="reviewerForm" :rules="reviewerRule" ref="reviewerFormRef" label-position="left" label-width="0px">
      <el-descriptions :column="6" labelClassName="label-style" contentClassName="con-style">
        <el-descriptions-item :labelStyle="{ height: '50px', width: '140px', lineHeight: '50px' }"
          :contentStyle="{ height: '50px' }"  :span="6">
          <template slot="label">
            <div class="des-label">
              <i class="el-icon-star-on icon-btn"></i>
              <span class="label-text">审核状态</span>
            </div>
          </template>
          <el-form-item prop="auditStatus">
            <el-radio-group v-model="reviewerForm.auditStatus">
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="2">驳回</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item :labelStyle="{ height: '110px', width: '200px', lineHeight: '110px' }"
          :contentStyle="{ height: '100px' }"  :span="6">
          <template slot="label">
            <div class="des-label">
              <i class="el-icon-star-on icon-btn"></i>
              <span class="label-text">签名</span>
            </div>
          </template>
          <el-form-item prop="auditUserSignature" style="height:100%;width: 100%;">
            <div class="desc-con flex justify-start items-center">
              <signature  @getSignatureImage="signatureData"></signature>
            </div>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item :labelStyle="{ height: '50px', width: '140px', lineHeight: '50px' }"
          :contentStyle="{ height: '50px' }"  :span="6">
          <template slot="label">
            <div class="des-label">
              <!-- <i class="el-icon-star-on icon-btn"></i> -->
              <span class="label-text">审核意见</span>
            </div>
          </template>
          <el-form-item prop="auditComment" style="height:100%;width: 100%;">
            <div class="desc-con flex justify-start items-center">
              <el-input type="textarea" v-model="reviewerForm.auditComment" :autosize="{ minRows: 2 }"
              placeholder="请输入审核意见"></el-input>
            </div>
          </el-form-item>
        </el-descriptions-item>
        
      </el-descriptions>

    </el-form>
    <div class="details-footer px-20 py-20 border-box">
      <el-button type="primary" @click="reviewerSubmit('reviewerFormRef')">审核</el-button>
    </div>
  </div>
</template>

<script>

import { setToExamineApi } from '@/api/project/index'
import { setContractReceivePaymentAuditRecordApi } from '@/api/receivableContract‌/index'
import { setContractMakePaymentAuditRecordApi } from '@/api/paymentContract/index'
import { setSealApplicationAuditRecordApi } from '@/api/sealApplication/index'
import { setFinReceivedInvoiceAuditRecordApi } from '@/api/finReceivedInvoiceItem/index'
import { setFinMakePaymentAuditRecordApi } from '@/api/paymentApplication/index'
import { setFinReimbursementAuditRecordApi } from '@/api/expenseReimbursement/index'
import { setFinPurchaseAuditRecordApi } from '@/api/purchaseRequisition/index'
import { setFinMakePaymentSupAuditRecordApi } from '@/api/supplierPay/index'
import { setFinElectricityCollectionAuditRecordApi } from '@/api/electricityFeeCollection/index'
import { setFinElectricityPaymentAuditRecordApi } from '@/api/electricityFeePay/index'
import signature from '@/components/signature/index.vue'
export default {
  components:{signature},
  data() {
    return {
      reviewerForm: {
        auditStatus: 1,
        auditComment: "",
        auditUserSignature: ''
      },

      reviewerRule: {
        auditStatus: [
          { required: true, message: '请选择审核状态', trigger: 'blur' },
        ],
        auditUserSignature: [
          { type: 'string',required: true, message: '请填写签名', trigger: 'blur' },
        ],
        // auditComment: [
        //   { required: true, message: '请输入审核意见', trigger: 'blur' },
        // ],
      },
    }
  },
  methods: {
    //重置审核form
    closeReviewerDialog(formName) {
      this.$refs[formName].resetFields();
      this.reviewerForm.auditStatus = '1';
      this.reviewerForm.auditComment = '';
    },
    //提交审核
    reviewerSubmit(formName) {
      console.log(this.$refs['reviewerFormRef'])
      this.$refs['reviewerFormRef'].validate(async (valid) => {
        if (valid) {
          let params = {
            auditRecordId: this.$store.state.recordId,
            ...this.reviewerForm
          }
          const { code } = await this.queryApi(this.$store.state.apiType, params)
          if (code == 200) {
            this.$store.dispatch('getRecordId', undefined)
            this.$store.dispatch('getApiType', undefined)
            this.$message({
              message: '已审核',
              type: 'success'
            })
            this.closeReviewerDialog('reviewerFormRef')
            this.$emit('refreshInitData')
          }

        } else {
          return false;
        }
      });
    },
    async queryApi(type, params) {
      switch (type) {
        case 'setToExamineApi':
          return await setToExamineApi(params)
          break;
        case 'setContractReceivePaymentAuditRecordApi':
          return await setContractReceivePaymentAuditRecordApi(params)
          break;
        case 'setContractMakePaymentAuditRecordApi':
          return await setContractMakePaymentAuditRecordApi(params)
          break;
        case 'setSealApplicationAuditRecordApi':
          return await setSealApplicationAuditRecordApi(params)
          break;
        case 'setFinReceivedInvoiceAuditRecordApi':
          return await setFinReceivedInvoiceAuditRecordApi(params)
          break;
        case 'setFinMakePaymentAuditRecordApi':
          return await setFinMakePaymentAuditRecordApi(params)
          break;
        case 'setFinReimbursementAuditRecordApi':
          return await setFinReimbursementAuditRecordApi(params)
          break;
        case 'setFinPurchaseAuditRecordApi':
          return await setFinPurchaseAuditRecordApi(params)
          break;
        case 'setFinMakePaymentSupAuditRecordApi':
          return await setFinMakePaymentSupAuditRecordApi(params)
          break;
        case 'setFinElectricityCollectionAuditRecordApi':
          return await setFinElectricityCollectionAuditRecordApi(params)
          break;
        case 'setFinElectricityPaymentAuditRecordApi':
          return await setFinElectricityPaymentAuditRecordApi(params)
          break;
        
        default:
          break;
      }
    },
    //签名
    signatureData(url){
      this.reviewerForm.auditUserSignature = url;
    },

  }
}
</script>

<style scoped lang="scss">
.desc-con {
  height: 100%;
  width: 100%;
}

.des-label {
  width: auto;
  position: relative;

  .icon-btn {
    color: #F56C6C;
    position: absolute;
    font-size: 12px;
    top: 50%;
    margin-top: -5px;
    display: inline-block;
  }

  .label-text {
    padding-left: 12px;
  }
}

::v-deep .el-form-item__content {
  width: 100%;
  height: 100%;
}
.details-footer {
  height: 50px;
  line-height: 50px;
  text-align: right;
}
</style>